<template>
    <div class="merchant-page">
       <div>
           <el-form>
                <el-form-item label="手机号：">
                    <el-input placeholder="请输入手机号" v-model="searchForm.phone" size="small" clearable></el-input>
               </el-form-item>
               <!-- <el-form-item label="状态：">
                   <el-select v-model="searchForm.status" placeholder="请选择状态" size="small">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in statusData" :key="index" :label="item.name" :value="item.id"></el-option>
                   </el-select>
               </el-form-item> -->
               <el-form-item>
                   <el-button class="search-btn" @click="searchData()">查&nbsp;&nbsp;询</el-button>
               </el-form-item>
               
           </el-form>
       </div>
       <div>
           <el-table :data="tableData" border>
               <el-table-column prop="phone" label="手机号"></el-table-column>
               <el-table-column prop="name" label="姓名"></el-table-column>
               <el-table-column prop="we_chat" label="微信号"></el-table-column>
               <el-table-column prop="qq" label="QQ号"></el-table-column>
               <el-table-column prop="scale" :formatter="getScale" label="分佣比例"></el-table-column>
               <el-table-column prop="status" :formatter="getStatusText" label="当前状态"></el-table-column>
               
           </el-table>
            <div class="block" style="margin: 20px 0px; text-align: right;">
            	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
            	 :page-sizes="[10, 15, 20, 25]" :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
            </div>
       </div>
    </div>

</template>
<script>
import {apiPromoterBindList} from '../../request/api'
    export default {
        data(){
            return {
                tableData:[],
                searchForm: {
                    phone: '',
                    pageSize: 10,
                    page: 1,
                    status: '',
                    token: window.sessionStorage.getItem("token")
                },
                statusData: [{
                    id: 1,
                    name: '正常'
                },{
                    id: 2,
                    name: '禁用'
                }],
                pageTotal: 0
            }
        },
        created () {
            this.getTableData() 
        },
        methods:{
            getScale(row){
                return row.scale * 10 + '%'
            },
            getStatusText(row){
                for (var i in this.statusData) {
                    if(this.statusData[i].id == row.status)
                    {
                        return this.statusData[i].name
                    }
                    
                }
            },
            getTableData (){
                apiPromoterBindList(this.searchForm).then(res =>{
                    this.tableData = res.msg.res
                    this.pageTotal = res.msg.con
                }).catch(res => {
                    
                })
            },
            searchData(){
                this.getTableData() 
            },
            handleSizeChange(val){
                this.searchForm.pageSize = val;
      	        this.getTableData()
            },
            handleCurrentChange(val){
                this.searchForm.page = val;
      	        this.getTableData()
            }
        }
    }
</script>
<style lang="less" scoped> 
@import '../../assets/css/common.css';
</style>